<script setup lang="ts" name="UserAvatarDemo">
import { ref, computed, defineComponent, h } from 'vue'
import CodeDemo from '@/components/common/CodeDemo/index.vue'
import UserAvatar from '@/components/common/UserAvatar/index.vue'

// 演示类型定义
type DemoType = 'default' | 'sizes' | 'status' | 'custom' | 'interactive'

// 当前选中的演示类型
const activeDemo = ref<DemoType>('default')

// 演示配置
const demoConfigs = [
  { id: 'default' as DemoType, name: '默认样式', icon: '👤', color: 'primary' },
  { id: 'sizes' as DemoType, name: '不同尺寸', icon: '📏', color: 'secondary' },
  { id: 'status' as DemoType, name: '状态显示', icon: '🟢', color: 'accent' },
  { id: 'custom' as DemoType, name: '自定义样式', icon: '🎨', color: 'info' },
  { id: 'interactive' as DemoType, name: '交互功能', icon: '🖱️', color: 'success' },
]

// Mock用户数据
const mockUsers = ref([
  {
    id: '1',
    name: '张三',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=zhangsan',
    email: 'zhangsan@example.com',
    status: 'online',
  },
  {
    id: '2',
    name: '李四',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=lisi',
    email: 'lisi@example.com',
    status: 'away',
  },
  {
    id: '3',
    name: '王五',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=wangwu',
    email: 'wangwu@example.com',
    status: 'busy',
  },
  {
    id: '4',
    name: '赵六',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=zhaoliu',
    email: 'zhaoliu@example.com',
    status: 'offline',
  },
])

// 当前用户
const currentUser = computed(() => mockUsers.value[0])

// 事件处理函数
const handleLogin = () => {
  console.log('用户登录')
}

const handleLogout = () => {
  console.log('用户登出')
}

const handleProfile = () => {
  console.log('查看个人资料')
}

const handleSettings = () => {
  console.log('打开设置')
}

// 切换演示类型
const switchDemo = (demoType: DemoType) => {
  activeDemo.value = demoType
}

// 获取描述
const getDescription = (demoType: DemoType) => {
  const descriptions = {
    default: '展示 UserAvatar 组件的基本功能和默认样式',
    sizes: '不同尺寸的头像，适用于各种场景',
    status: '显示用户在线状态的头像',
    custom: '自定义样式的头像，展示个性化效果',
    interactive: '支持交互的头像，点击可触发各种事件',
  }
  return descriptions[demoType] || ''
}

// Vue组件定义
const DefaultExample = defineComponent({
  name: 'DefaultExample',
  setup() {
    return {
      user: currentUser,
      handleLogin,
      handleLogout,
      handleProfile,
      handleSettings,
    }
  },
  render() {
    return h(UserAvatar, {
      user: this.user,
      onLogin: this.handleLogin,
      onLogout: this.handleLogout,
      onProfile: this.handleProfile,
      onSettings: this.handleSettings,
    })
  },
})

const SizesExample = defineComponent({
  name: 'SizesExample',
  setup() {
    return {
      user: currentUser,
      handleLogin,
      handleLogout,
      handleProfile,
      handleSettings,
    }
  },
  render() {
    return h('div', { class: 'flex items-center gap-4' }, [
      h(UserAvatar, {
        user: this.user,
        size: 'sm',
        onLogin: this.handleLogin,
        onLogout: this.handleLogout,
        onProfile: this.handleProfile,
        onSettings: this.handleSettings,
      }),
      h(UserAvatar, {
        user: this.user,
        size: 'md',
        onLogin: this.handleLogin,
        onLogout: this.handleLogout,
        onProfile: this.handleProfile,
        onSettings: this.handleSettings,
      }),
      h(UserAvatar, {
        user: this.user,
        size: 'lg',
        onLogin: this.handleLogin,
        onLogout: this.handleLogout,
        onProfile: this.handleProfile,
        onSettings: this.handleSettings,
      }),
    ])
  },
})

const StatusExample = defineComponent({
  name: 'StatusExample',
  setup() {
    return {
      users: mockUsers,
      handleLogin,
      handleLogout,
      handleProfile,
      handleSettings,
    }
  },
  render() {
    return h(
      'div',
      { class: 'flex items-center gap-4' },
      this.users.map((user) =>
        h(UserAvatar, {
          user,
          showStatus: true,
          onLogin: this.handleLogin,
          onLogout: this.handleLogout,
          onProfile: this.handleProfile,
          onSettings: this.handleSettings,
        }),
      ),
    )
  },
})

const CustomExample = defineComponent({
  name: 'CustomExample',
  setup() {
    return {
      user: currentUser,
      handleLogin,
      handleLogout,
      handleProfile,
      handleSettings,
    }
  },
  render() {
    return h('div', { class: 'custom-avatar-container' }, [
      h(UserAvatar, {
        user: this.user,
        size: 'lg',
        showStatus: true,
        customClass: 'custom-avatar',
        onLogin: this.handleLogin,
        onLogout: this.handleLogout,
        onProfile: this.handleProfile,
        onSettings: this.handleSettings,
      }),
    ])
  },
})

const InteractiveExample = defineComponent({
  name: 'InteractiveExample',
  setup() {
    return {
      user: currentUser,
      handleLogin,
      handleLogout,
      handleProfile,
      handleSettings,
    }
  },
  render() {
    return h('div', { class: 'space-y-4' }, [
      h('div', { class: 'text-sm text-base-content/70' }, '点击头像查看交互效果'),
      h(UserAvatar, {
        user: this.user,
        size: 'lg',
        showStatus: true,
        interactive: true,
        onLogin: this.handleLogin,
        onLogout: this.handleLogout,
        onProfile: this.handleProfile,
        onSettings: this.handleSettings,
      }),
    ])
  },
})

// Vue组件映射
const exampleComponents = {
  default: DefaultExample,
  sizes: SizesExample,
  status: StatusExample,
  custom: CustomExample,
  interactive: InteractiveExample,
}

// 获取当前示例组件
const currentExampleComponent = computed(() => {
  return exampleComponents[activeDemo.value] || DefaultExample
})

// 获取模板代码
const getTemplateCode = (demoType: DemoType) => {
  const templates = {
    default: `render() {
  return h(UserAvatar, {
    user: this.user,
    onLogin: this.handleLogin,
    onLogout: this.handleLogout,
    onProfile: this.handleProfile,
    onSettings: this.handleSettings,
  })
}`,
    sizes: `render() {
  return h('div', { class: 'flex items-center gap-4' }, [
    h(UserAvatar, { user: this.user, size: 'sm', ...handlers }),
    h(UserAvatar, { user: this.user, size: 'md', ...handlers }),
    h(UserAvatar, { user: this.user, size: 'lg', ...handlers }),
  ])
}`,
    status: `render() {
  return h('div', { class: 'flex items-center gap-4' },
    this.users.map(user =>
      h(UserAvatar, { user, showStatus: true, ...handlers })
    )
  )
}`,
    custom: `render() {
  return h('div', { class: 'custom-avatar-container' }, [
    h(UserAvatar, {
      user: this.user,
      size: 'lg',
      showStatus: true,
      customClass: 'custom-avatar',
      ...handlers
    })
  ])
}`,
    interactive: `render() {
  return h('div', { class: 'space-y-4' }, [
    h('div', { class: 'text-sm text-base-content/70' }, '点击头像查看交互效果'),
    h(UserAvatar, {
      user: this.user,
      size: 'lg',
      showStatus: true,
      interactive: true,
      ...handlers
    })
  ])
}`,
  }
  return templates[demoType] || ''
}

// 获取脚本代码
const getScriptCode = (demoType: DemoType) => {
  return `import { defineComponent, ref } from 'vue'
import UserAvatar from '@/components/common/UserAvatar/index.vue'

export const UserAvatarExample = defineComponent({
  name: 'UserAvatarExample',
  setup() {
    const user = ref({
      id: '1',
      name: '张三',
      avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=zhangsan',
      email: 'zhangsan@example.com',
      status: 'online'
    })

const handleLogin = () => {
  console.log('用户登录')
}

const handleLogout = () => {
  console.log('用户登出')
}

const handleProfile = () => {
  console.log('查看个人资料')
}

const handleSettings = () => {
  console.log('打开设置')
}

    return {
      user,
      handleLogin,
      handleLogout,
      handleProfile,
      handleSettings,
    }
  },
  ${getTemplateCode(demoType)}
})`
}

// 获取样式代码
const getStyleCode = (demoType: DemoType) => {
  const styles = {
    default: `/* 默认样式 */
.user-avatar {
  transition: all 0.3s ease;
}`,
    sizes: `/* 尺寸样式 */
.avatar-sm { width: 2rem; height: 2rem; }
.avatar-md { width: 3rem; height: 3rem; }
.avatar-lg { width: 4rem; height: 4rem; }`,
    status: `/* 状态样式 */
.status-online { color: #10b981; }
.status-away { color: #f59e0b; }
.status-busy { color: #ef4444; }
.status-offline { color: #6b7280; }`,
    custom: `/* 自定义样式 */
.custom-avatar-container {
  padding: 2rem;
  background: linear-gradient(135deg, hsl(var(--p) / 0.1), hsl(var(--s) / 0.1));
  border-radius: 1rem;
  border: 2px solid hsl(var(--p) / 0.3);
}

.custom-avatar {
  box-shadow: 0 8px 32px hsl(var(--p) / 0.2);
  border: 3px solid hsl(var(--p));
}`,
    interactive: `/* 交互样式 */
.interactive-avatar {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.interactive-avatar:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 32px hsl(var(--p) / 0.3);
}`,
  }
  return styles[demoType] || ''
}
</script>

<template>
  <div class="useravatar-demo-container min-h-screen bg-gradient-to-br from-base-100 to-base-200">
    <div class="max-w-7xl mx-auto p-8">
      <!-- 页面标题 -->
      <div class="text-center mb-8">
        <h1 class="text-4xl font-bold text-base-content mb-4">UserAvatar 组件演示</h1>
        <p class="text-lg text-base-content/70">展示 UserAvatar 组件的各种使用场景和自定义选项</p>
      </div>

      <!-- 顶部按钮组 -->
      <div class="mb-8">
        <div class="flex flex-wrap gap-3 justify-center">
          <button
            v-for="config in demoConfigs"
            :key="config.id"
            @click="switchDemo(config.id)"
            class="btn gap-2 px-4 py-3 transition-all duration-200 hover:scale-105"
            :class="[
              activeDemo === config.id
                ? `btn-${config.color} shadow-lg`
                : `btn-outline btn-${config.color} hover:btn-${config.color}`,
            ]"
          >
            <span class="text-lg">{{ config.icon }}</span>
            <span class="font-medium">{{ config.name }}</span>
          </button>
        </div>
      </div>

      <!-- 演示区域 -->
      <div class="space-y-6">
        <!-- 使用CodeDemo组件展示每个演示 -->
        <CodeDemo
          v-for="config in demoConfigs"
          :key="config.id"
          v-show="activeDemo === config.id"
          :title="config.name"
          :description="getDescription(config.id)"
          :template="getTemplateCode(config.id)"
          :script="getScriptCode(config.id)"
          :style="getStyleCode(config.id)"
          language="vue"
          preview-height="auto"
          code-height="600px"
        >
          <template #preview>
            <!-- 使用Vue组件渲染 -->
            <component :is="currentExampleComponent" />
          </template>
        </CodeDemo>
      </div>

      <!-- 配置说明 -->
      <div class="mt-8 bg-base-100 rounded-3xl p-8 border border-base-300/30 shadow-xl">
        <h2 class="text-2xl font-semibold text-base-content mb-6 text-center">
          📚 配置说明 (Configuration Guide)
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <!-- Props 配置 -->
          <div class="space-y-3">
            <h3 class="font-semibold text-base-content">Props 配置</h3>
            <div class="space-y-2 text-sm">
              <div><code class="bg-base-200 px-2 py-1 rounded">user</code> - 用户数据对象</div>
              <div>
                <code class="bg-base-200 px-2 py-1 rounded">size</code> - 头像尺寸 (sm|md|lg)
              </div>
              <div>
                <code class="bg-base-200 px-2 py-1 rounded">showStatus</code> - 是否显示状态
              </div>
              <div><code class="bg-base-200 px-2 py-1 rounded">interactive</code> - 是否可交互</div>
              <div>
                <code class="bg-base-200 px-2 py-1 rounded">customClass</code> - 自定义CSS类
              </div>
            </div>
          </div>

          <!-- Events 配置 -->
          <div class="space-y-3">
            <h3 class="font-semibold text-base-content">Events 配置</h3>
            <div class="space-y-2 text-sm">
              <div><code class="bg-base-200 px-2 py-1 rounded">@login</code> - 登录事件</div>
              <div><code class="bg-base-200 px-2 py-1 rounded">@logout</code> - 登出事件</div>
              <div><code class="bg-base-200 px-2 py-1 rounded">@profile</code> - 查看资料事件</div>
              <div><code class="bg-base-200 px-2 py-1 rounded">@settings</code> - 设置事件</div>
            </div>
          </div>

          <!-- 用户数据结构 -->
          <div class="space-y-3">
            <h3 class="font-semibold text-base-content">用户数据结构</h3>
            <div class="space-y-2 text-sm">
              <div><code class="bg-base-200 px-2 py-1 rounded">id: string</code> - 用户ID</div>
              <div><code class="bg-base-200 px-2 py-1 rounded">name: string</code> - 用户名</div>
              <div><code class="bg-base-200 px-2 py-1 rounded">avatar: string</code> - 头像URL</div>
              <div><code class="bg-base-200 px-2 py-1 rounded">email: string</code> - 邮箱</div>
              <div>
                <code class="bg-base-200 px-2 py-1 rounded">status: string</code> - 在线状态
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.useravatar-demo-container {
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
}

.custom-avatar-container {
  padding: 2rem;
  background: linear-gradient(135deg, hsl(var(--p) / 0.1), hsl(var(--s) / 0.1));
  border-radius: 1rem;
  border: 2px solid hsl(var(--p) / 0.3);
}

code {
  font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
}

/* 按钮动画 */
.btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover {
  transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .useravatar-demo-container {
    padding: 1rem;
  }

  .btn {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }
}
</style>
